<script setup lang="tsx">
import type { DataTableColumns, NDataTable } from 'naive-ui'
import DynamicContentCell from '@/components/basic/DynamicContentCell.vue'
import { DragClass, FieldType } from '@/constants'
import { useBoolean } from '@/hooks'
import { useTableDrag } from '@/hooks/useTableDrag'
import { fetchUserPage } from '@/service'
import { bumData } from '@/views/demo/list/commonList/mock'
import { NButton, NPopconfirm, NSpace } from 'naive-ui'

const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)

const columns: DataTableColumns<Entity.Field> = [
  {
    title: '名称',
    align: 'center',
    key: 'name',
  },
  {
    title: '类型',
    align: 'center',
    key: 'type',
  },
  {
    title: '中文描述',
    align: 'center',
    key: 'cnDesc',
  },
  {
    title: '备注',
    align: 'center',
    key: 'remark',
  },
  {
    title: '邮箱',
    align: 'center',
    key: 'email',
  },
  {
    title: '操作',
    align: 'center',
    key: 'actions',
    render: (row: Entity.Field) => {
      return (
        <NSpace justify="center">
          <NTooltip trigger="hover">
            {{
              default: () => '添加相邻节点',
              trigger: () => (
                <NButton
                  size="small"
                  strong
                  secondary
                  circle
                  type="success"
                  onClick={() => handlerAdd(row.id)}
                >
                  {{
                    icon: () => <SvgIconsAdd />,
                  }}
                </NButton>
              ),
            }}
          </NTooltip>
          <NPopconfirm onPositiveClick={() => removeField(row.id)}>
            {{
              default: () => '确认删除',
              trigger: () => (
                <NButton
                  size="small"
                  strong
                  secondary
                  circle
                  type="error"
                  v-slots={{
                    icon: () => <SvgIconsDelete />,
                  }}
                >
                </NButton>
              ),
            }}
          </NPopconfirm>
        </NSpace>
      )
    },
  },
]

const listData = ref<Entity.Field[]>([])

onMounted(() => {
  listData.value = bumData
})

function reorder() {
  listData.value.forEach((item, index) => {
    item.order = index + 1
  })
}
function removeField(id: number): void {
  listData.value = listData.value.filter(f => f.id != id)
}

function handlerAdd(id: number): void {
  const bum: Entity.Field = { id: new Date().getTime() }
  const index = listData.value.findIndex(f => f.id == id)
  listData.value.splice(index + 1, 0, bum)
}

async function getUserList() {
  startLoading()
  await fetchUserPage().then((res: any) => {
    listData.value = res.data.list
    endLoading()
  })
}

function getItemClass(row: Entity.Field): DragClass {
  return row.name && row.name.trim() && row.type && row.type.trim()
    ? DragClass.DRAGGABLE
    : DragClass.UN_DRAGGABLE
}

const tableRef = ref<InstanceType<typeof NDataTable>>()
useTableDrag({
  tableRef,
  data: listData,
  onRowDrag(data) {
    const target = data[data.length - 1]
    window.$message.success(`拖拽数据 id: ${target.id} name: ${target.name}`)
  },
})
const fieldType = ref(FieldType.STRING)
</script>

<template>
  <NSpace vertical size="large">
    <n-card>
      <!--      <FieldTypeTag :filed-type="fieldType"/> -->
      <DynamicContentCell />
    </n-card>
    <n-card>
      <NSpace vertical size="large">
        <div class="flex gap-4">
          <NButton type="primary" @click="handlerAdd">
            <template #icon>
              <icon-park-outline-add-one />
            </template>
            新建
          </NButton>
          <NButton strong secondary>
            <template #icon>
              <icon-park-outline-afferent />
            </template>
            批量导入
          </NButton>
          <NButton strong secondary class="ml-a">
            <template #icon>
              <icon-park-outline-download />
            </template>
            下载
          </NButton>
        </div>
        <n-data-table
          ref="tableRef" :row-class-name="getItemClass" :columns="columns" :data="listData"
          :loading="loading"
        />
      </NSpace>
    </n-card>
  </NSpace>
</template>
